<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="overflow-y: visible;">
	<jsp:include page="../../../include/IncludeMain.jsp"></jsp:include>
	<body style="overflow-y: visible !important; overflow-y: scroll;">
		<form
			action="${pageContext.request.contextPath }/pages/business/rule.do?act=saveCat"
			name="myForm" id="myForm" method="post">
			<table class="mainTable">
				<thead>
					<tr class="tableController">
						<th colspan="2">
							<h3>
								规则编辑
							</h3>
						</th>
					</tr>
					<tr>
						<th>
							&nbsp;
						</th>
						<th class="errorTip"
							style='<c:if test="${empty message}">display:none</c:if>'>
							<c:forEach items="${message}" var="m">
								${m }
							</c:forEach>
						</th>
					</tr>
					<tr class="tableTitle">
						<th>
							<h3>
								&nbsp;
							</h3>
						</th>
						<th>
							<h3>
								&nbsp;
							</h3>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td width="200" align="right">
							<h4>
								规则长度:&nbsp;&nbsp;
							</h4>
						</td>
						<td id="rule_length">
							<input type="hidden" name="rule_id" id="rule_id"
								value="${rule.id}" />
							<input type="hidden" name="cat_p" id="cat_p" value="" />
							<input type="hidden" name="att_p" id="att_p" value="" />
							<input type="text" validation="required" name="length"
								id="length" onchange="setLength(this);" style="width: 40px;" />
							<em style="color: red;">*</em>
						</td>
					</tr>
					<tr>
						<td width="200" align="right">
							<h4>
								规则:&nbsp;&nbsp;
							</h4>
						</td>
						<td id="pattern">
							<span id="done"></span>
							<input type="text" name="sublength" id="sublength"
								onchange="calculate(this.value);"
								style="width: 40px; float: none;" />
						</td>
					</tr>
					<tr>
						<td align="right">
							<h4>
								类别:&nbsp;&nbsp;
							</h4>
						</td>
						<td id="cate">
							&nbsp;
						</td>
					</tr>
					<tr>
						<td align="right">
							<h4>
								属性:&nbsp;&nbsp;
							</h4>
						</td>
						<td id="att">
							&nbsp;
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr class="tableController_bottom">
						<td align="center">
							&nbsp;
						</td>
						<td align="left">
							<a class="button" href="javascript:void(0)"
								onclick="this.blur(); test();'return false';"><span><img
										src="${pageContext.request.contextPath }/js/kui/icons/disk.png"
										align="absmiddle" />&nbsp;保存</span>
							</a>
							<a class="button" href="javascript:void(0)"
								onclick="this.blur(); history.go(-1);'return false';"><span><img
										src="${pageContext.request.contextPath }/js/kui/icons/anticlockwise.png"
										align="absmiddle" />&nbsp;返回</span>
							</a>
						</td>
					</tr>
				</tfoot>
			</table>
		</form>
		<script type="text/javascript">
	var formId = 'myForm';
	var valid = new KUI.Validation({
		formId : formId,
		immediate : true
	});
	function save() {
		if (valid.validate()) {
			document.getElementById(formId).submit();
		}
	}

	var length = 0;
	var count = 0;
	var category_count = 0;
	var limit = new Array();
	function setDisabled(athis) {
		athis.disabled = "disabled";
	}

	function setLength(athis) {
		length = athis.value;
		athis.disabled = "disabled";
	}

	function calculate(subLength) {
		if (length >= subLength * 1) {
			limit[category_count] = subLength;
			category_count++;
			document.getElementById("pattern").innerHTML = document
					.getElementById("pattern").innerHTML;
			length = length - subLength;
			if (length == 0) {
				document.getElementById("done").innerHTML += subLength;
				document.getElementById("pattern").innerHTML = document
						.getElementById("done").innerHTML;
				document.getElementById("cate").innerHTML += "<input type='text' id='category' style='width:80px;float:none;' onchange='addAtt(this);'/>";
			} else {
				document.getElementById("done").innerHTML += subLength + " - ";
				document.getElementById("cate").innerHTML += "<input type='text' id='category' style='width:80px;float:none;' onchange='addAtt(this);'/> - ";
			}
		}
	}

	function addAtt(cate) {
		cate.disabled = "disabled";
		document.getElementById("att").innerHTML += "<div style='width:180px;float:left;'><span style='font-size:12px;'>"
				+ cate.value
				+ "：</span><ul id='" + count + "'></ul><a class='button' href='javascript:void(0)' onclick='this.blur();addAttribute("
				+ count
				+ ");'; return false;'><span><img src='${pageContext.request.contextPath }/js/kui/icons/application_add.png' align='absmiddle'/>&nbsp;添加</span></a></div>";
		count += 1;
	}

	var tmp = 0;
	function addAttribute(id) {

		document.getElementById(id).innerHTML += "<input type='text' value='' id='att_key' style='width:80px;float:none;'> - <input type='text' value='' id='att_value' validation='width=3' style='width:80px;float:none;'>";
		tmp += 1;
	}

	function test() {
		fm = document.getElementById('myForm');
		vcat = fm.category;
		vkey = fm.att_key;
		vvalue = fm.att_value;
		var k = 0;
		var cat = "";
		var att = "";
		var c = document.getElementById("att").getElementsByTagName("input").length;
		if (2 == c) {
			for ( var i = 0; i < category_count; i++) {
				var l = document.getElementById(i)
						.getElementsByTagName("input").length;
				if (c == l) {
					att += vkey.value + "," + vvalue.value + "/";
				}
				att += "&";
			}
			for ( var i = 0; i < category_count; i++) {
				cat += vcat[i].value + ",";
			}
		} else {
			for ( var i = 0; i < category_count; i++) {
				cat += vcat[i].value + ",";
				var l = document.getElementById(i)
						.getElementsByTagName("input").length;
				for ( var j = k; j < k + l / 2; j++) {
					att += vkey[j].value + "," + vvalue[j].value + "/";
				}
				att += "&";
				k = k + l / 2;
			}
		}
		document.getElementById("cat_p").value = cat;
		document.getElementById("att_p").value = att;
		fm.submit();
	}
</script>
	</body>
</html>
